<template>
    <div id="KCManager">
        <div class="bg">
            <!--            标题-->
            <div style="margin-bottom: 15px;">
                <router-link to="/knowledgebase"><el-button style="float: right;margin-right: 15px;width: 80px;margin-top: 15px;">保存</el-button></router-link>
                <el-button style="float: right;margin-right: 15px;width: 80px;margin-top: 15px;" @click="dialogFormVisible = true">新增</el-button>
                <span style="display: inline-block;font-weight: unset;margin-left: 20px;font-size: 25px;margin-top: 15px;">文档类型管理</span>
            </div>
            <hr style="margin: 15px"/>

            <!-- 数据内容-->
            <div style="padding: 15px">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="essClassifyId"  type="selection" width="55"></el-table-column>
                    <el-table-column prop="essClassifyId" label="类型编号"></el-table-column>
                    <el-table-column prop="essClassify" label="类型名称"></el-table-column>
                    <el-table-column prop="numEss" label="排序"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="editOne(scope.row)" circle type="primary"  icon="el-icon-edit"></el-button>
                            <el-button @click="deleteOne(scope.row)" circle type="danger" icon="el-icon-delete"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

            <!-- 新增弹窗-->
            <el-dialog title="新增类型" :visible.sync="dialogFormVisible">
                <el-form :model="knowledgeClassify">
                    <el-form-item label="类型名称" :label-width="formLabelWidth">
                        <el-input v-model="knowledgeClassify.essClassify" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" :label-width="formLabelWidth">
                        <el-input v-model="knowledgeClassify.numEss" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false,addKC()">提 交</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    export default {
        name: "KnowledgeClassifyManager",
        data: function () {
            return{
                tableData:[],
                dialogFormVisible: false,
                knowledgeClassify: {
                    essClassifyId:0,
                    essClassify: '',
                    numEss:0
                },
                formLabelWidth: '120px'

            };
        },
        methods:{
            initKnowledgeClassify(){
                this.$axios.get("api/after-sale/knowledge/knowledgeClassify-list")
                    .then(v=>{
                        this.tableData = v.data;
                    }).catch();
            },
            addKC(){
                this.$axios.post("api/after-sale/knowledge/add-knowledgeClassify",this.qs.stringify(this.knowledgeClassify))
                    .then(v=>{
                        //刷新数据
                        this.initKnowledgeClassify();
                        //关闭弹窗
                        this.dialogFormVisible = false;
                        //重置数据
                        this.knowledgeClassify = {
                            essClassifyId:0,
                            essClassify: '',
                            numEss:0
                        }
                    }).catch();
            },
            deleteOne(kc){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("api/after-sale/knowledge/delete-kc",this.qs.stringify({kcNo:kc.essClassifyId}))
                        .then(v=>{
                            this.initKnowledgeClassify();
                        }).catch();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editOne(kc){
                this.dialogFormVisible = true;
                this.knowledgeClassify = {
                    essClassifyId:kc.essClassifyId,
                    essClassify:kc.essClassify,
                    numEss:kc.numEss
                }
            }
        },
        created:function() {
            this.initKnowledgeClassify();
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    #KCManager{
        width: 100%;
    }
    .bg{
        background-color: white;
        margin: 20px;
        min-height: 800px;
    }
</style>